import {Component, OnInit, SimpleChanges, Input} from '@angular/core';
import {DatePipe} from '@angular/common';
import {TagData} from '../../../../entity/tag-data.model';

@Component({
  selector: 'app-photovoltaic-echarts',
  templateUrl: './photovoltaic-echarts.component.html',
  styleUrls: ['./photovoltaic-echarts.component.css']
})
export class PhotovoltaicEchartsComponent implements OnInit {

  /**
   *当前值
   *
   * @type {TagData}
   * @memberof PhotovoltaicEchartsComponent
   */
  @Input()
  currData: TagData;

  @Input()
  currentFarm: any;


  /**
   * echarts实例对象
   *
   * @private
   * @type {*}
   * @memberof FarmEchartsComponent
   */
  private echartsIntance: any;
  public options: object;

  @Input()
  yesterdayDatas: any[];

  /**
   * 有功功率
   *
   * @memberof FarmEchartsComponent
   */
  @Input()
  data: any
  @Input()
  historyDates: any[];
  @Input()
  seriesName1: string;
  @Input()
  seriesName2: string;
  @Input()
  title: string;
  /**
   *今日历史数据
   *
   * @private
   * @type {any[]}
   * @memberof PhotovoltaicEchartsComponent
   */
  private historySeries: any[] = [];
  /**
   *昨日数据
   *
   * @private
   * @type {any[]}
   * @memberof PhotovoltaicEchartsComponent
   */
  private yesterdaySeries: any[] = [];


  constructor(private datePipe: DatePipe) {
  }

  ngOnInit() {
    this.series[0].name = this.seriesName1;
    this.series[0].data = this.historySeries;
    // this.series[0].data=[];
    //加载昨日数据
    this.series[1].name = this.seriesName2;
    this.series[1].data = this.yesterdaySeries;
    // this.series[1].data =[];
    //初始化图表

    this.initOption();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['historyDates'] && changes['historyDates'].currentValue) {
      this.historySeries.splice(0, this.historySeries.length);
      this.historyDates.forEach(o => {
        this.historySeries.push(o);
      });
    }

    if (changes['yesterdayDatas'] && changes['yesterdayDatas'].currentValue) {
      this.yesterdaySeries.splice(0, this.yesterdaySeries.length);
      if (changes['yesterdayDatas'].currentValue && changes['yesterdayDatas'].currentValue.length)
        this.yesterdaySeries.push(...changes['yesterdayDatas'].currentValue);
    }
    if (changes['data'] && changes['data'].currentValue) {
      if (this.data) {
        this.historySeries.push(this.data);
      }
    }
    this.updateEchart();
  }

  private series: any = [
    {
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1
        }
      },
      itemStyle: {
        normal: {
          color: '#1E90FF',
          borderColor: 'rgba(0,136,212,0.2)',
          borderWidth: 12,
          lineStyle: {
            color: '#1E90FF'
          }

        }
      },
      // data: this.powerDatas
    },
    {
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      xAxisIndex: 1,
      lineStyle: {
        normal: {
          width: 1
        }
      },
      itemStyle: {
        normal: {
          color: '#9370DB',
          borderColor: 'rgba(0,136,212,0.2)',
          borderWidth: 12,
          lineStyle: {
            color: '#9370DB'
          }

        }
      },
      //data: this.yesterdayPowers
    },
  ]

  initOption() {
    // console.log(this.yesterdayDatas,this.historyDates,this.currData,this.currentFarm,this.title)
    //let data = [[0, 0], [0, 10], [600, 12], [800, 44], [1200, 23], [2400, 56], [3600, 45], [4000, 78], [5000, 45], [7200, 34], [8000, 44], [13000, 12], [36000, 99], [72000, 60.9]];
    //数据格式为 第一个为时间，第二个为value
    let pipe = this.datePipe;
    let nowDate = new Date();
    this.options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#57617B'
          }
        },
      },
      legend: {
        // data: ['昨日功率：MW', '今日功率：MW']
      },
      grid: {
        left: '3%',
        right: '2%',
        bottom: '3%',
        top: '5%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'time',
          min: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()),
          max: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + 1),
          interval: 60000 * 60,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#35789d',
              width: 2
            }
          },
          axisLabel: {
            // 该属性的用来定义坐标轴的标签;
            formatter: function (value, index) {
              return pipe.transform(new Date(value), 'HH:mm');
            },
            rotate: 30
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1b4268'
            }
          },
          axisTick: {
            show: false
          },
        },
        {
          type: 'time',
          min: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 1),
          max: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()),
          interval: 60000 * 60,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#35789d',
            }
          },
          show: false,
          axisLabel: {
            // 该属性的用来定义坐标轴的标签;
            formatter: function (value, index) {
              return pipe.transform(new Date(value), 'HH:mm');
            },
            rotate: 30
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1b4268'
            }
          },
          axisTick: {
            show: false
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            //也可以像X轴那样定义想要的显示效果
            formatter: '{value}'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1b4268'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#35789d',
              width: 2
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: this.series
    };


  }


  //初始化图表实例
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    this.updateEchart();
  }

  //更新图表数据
  updateEchart() {
    if (this.echartsIntance != null) {
      // console.log(this.options)
      this.echartsIntance.setOption(this.options);
    }
  }

}

